/**
 * #info
 *@author   wuwg
 *@createTime   2018/05/10
 *@updateTime    2018/05/10
 *@description  markdown component  markdown组件
 */
import config from '../../../../../config/config.js'

/**
 *@author   wuwg
 *@createTime   2018/05/11
 *@updateTime   2018/05/15
 *@description  md-toolbar-right  component
 */
const _btnCls = ['op-icon', 'fa']
export default {
  name: 's-md-toolbar-right',
  props: {
    /**
     * @toolbars   ｛object｝ 包含以下属性
     * ----@navigation  ｛boolean｝  是否有导航按钮
     * ----@preview     ｛boolean｝    是否有预览按钮
     * ----@fullscreen  ｛boolean｝    是否有全屏按钮
     * ----@readmodel   ｛boolean｝    是否有阅读模式按钮
     * ----@subfield   ｛boolean｝    是否有分栏按钮
     * ----@htmlcode   ｛boolean｝    是否有代码模式按钮
     * ----@help       ｛boolean｝    是否有帮助模式按钮
     */
    toolbars: {
      type: Object,
      required: true
    },
    /**
     * #property
     *
     * @name  d_words
     * @cn    按钮中title属性
     * @type   object
     * @bind   must
     * @required true
     * @description 按钮中title属性
     */
    d_words: {
      type: Object,
      required: true
    },
    /**
     * #property
     *
     * @name  s_subfield
     * @cn    分栏按钮是否选中
     * @type   boolean
     * @bind  must
     * @required true
     * @description 分栏按钮是否选中
     */
    s_subfield: {
      type: Boolean,
      required: true
    },

    /**
     * #property
     *
     * @name s_preview_switch
     * @cn   预览按钮是否选中
     * @type   boolean
     * @bind  must
     * @required true
     * @description 预览按钮是否选中
     */
    s_preview_switch: {
      type: Boolean,
      required: true
    },
    /**
     * #property
     *
     * @name s_fullScreen
     * @cn   全屏按钮是否选中
     * @type   boolean
     * @bind  must
     * @required true
     * @description 全屏按钮是否选中
     */
    s_fullScreen: {
      type: Boolean,
      required: true
    },
    /**
     * #property
     *
     * @name s_html_code
     * @cn   代码模式按钮是否选中
     * @type   boolean
     * @bind  must
     * @required true
     * @description 代码模式按钮是否选中
     */
    s_html_code: {
      type: Boolean,
      required: true
    },
    /**
     * #property
     *
     * @name s_navigation
     * @cn   导航按钮是否选中
     * @type   boolean
     * @bind  must
     * @required true
     * @description 导航按钮是否选中
     */
    s_navigation: {
      type: Boolean,
      required: true
    }

  },
  data () {
    return {}
  },
  watch: {

  },
  computed: {

    // 导航是否选中
    navigationSelected () {
      return this.s_navigation
    },
    // 导航的标题
    navigationTitle () {
      // [关闭标题导航，开启标题导航]
      return this.d_words[this.navigationSelected ? 'tl_navigation_off' : 'tl_navigation_on'] + '(F8)'
    },
    // 导航按钮class
    navigationClass () {
      return [
        ..._btnCls,
        'fa-mavon-bars',
        {
          selected: this.navigationSelected
        }
      ]
    },

    // 预览是否选中
    previewSelected () {
      return this.s_preview_switch
    },
    // 预览的标题, [预览，编辑]
    previewTitle () {
      return this.d_words[this.previewSelected ? 'tl_preview' : 'tl_edit'] + '(F9)'
    },
    // 预览按钮class
    previewClass () {
      return [
        ..._btnCls,
        this.previewSelected ? 'fa-mavon-eye-slash' : 'fa-mavon-eye',
        { selected: this.previewSelected }
      ]
    },

    // 全屏是否选中
    fullscreenSelected () {
      return this.s_fullScreen
    },
    // 全屏的标题
    fullscreenTitle () {
      return this.d_words[this.fullscreenSelected ? 'tl_fullscreen_off' : 'tl_fullscreen_on'] + '(F10)'
    },
    // 全屏按钮的class
    fullscreenClass () {
      return [
        ..._btnCls,
        this.fullscreenSelected ? 'fa-mavon-compress' : 'fa-mavon-arrows-alt',
        { selected: this.fullscreenSelected }
      ]
    },

    // 阅读模式的标题
    readmodelTitle () {
      return this.d_words.tl_read + '(F11)'
    },
    // 阅读模式按钮的class
    readmodelClass () {
      return [
        ..._btnCls,
        'fa-mavon-window-maximize'
      ]
    },

    // 分栏是否选中
    subfieldSelected () {
      return this.s_subfield
    },
    // 分栏的标题
    subfieldTitle () {
      return this.d_words[this.subfieldSelected ? 'tl_single_column' : 'tl_double_column'] + '(F12)'
    },
    // 分栏按钮的class
    subfieldClass () {
      return [
        ..._btnCls,
        'fa-mavon-columns',
        { selected: this.subfieldSelected }
      ]
    },
    // html模式是否选中
    htmlSelected () {
      return this.s_html_code
    },
    // html模式的标题
    htmlTitle () {
      return this.d_words[this.htmlSelected ? 'tl_html_off' : 'tl_html_on']
    },
    // 分栏按钮的class
    htmlClass () {
      return [
        ..._btnCls,
        'fa-mavon-code',
        { selected: this.htmlSelected }
      ]
    },

    // help是否选中
    helpSelected () {
      return this.s_html_code
    },
    // help 的标题
    helpTitle () {
      return this.d_words.tl_help
    },
    // 分栏按钮的class
    helpClass () {
      return [
        ..._btnCls,
        'fa-mavon-question-circle'
      ]
    },
    // 是否有分割线
    hasDivide () {
      var toolbars = this.toolbars
      return toolbars.help &&
                toolbars.htmlcode &&
                toolbars.readmodel &&
                toolbars.fullscreen &&
                toolbars.subfield &&
                toolbars.navigation
    }
  },
  methods: {
    // 工具栏功能图标click-----------------
    clickToolbar (_type) {
      // 让父节点来绑定事件并
      this.$emit('toolbar-right-click', _type)
    }
  }
}
